import { computed, reactive, ref } from 'vue'
import { defineStore } from 'pinia'

export const useDtkStore = defineStore(
    'dtk',
    () => {
        const baseInfo = reactive<Record<string, boolean | number>>({
            checked1: false,
            radio1: 1,
            checked2: true,
            checked3: false,
            radio2: 1,
            checked4: false,
            checked5: false,
            checked6: false,
            checked7: false,
            checked8: false,
            examNumberDigits: 8
        })

        const showLayout = ref<boolean>(false)
        const layoutData: Record<string, Record<number, string>> = {
            paperSize: {
                1: 'A3/B4/8K纸',
                2: 'A4/B5纸'
            },
            answerSheetLayout: {
                1: '一栏',
                2: '两栏',
                3: '三栏'
            },
            gradingMethod: {
                1: '线上阅卷',
                2: '先阅后扫'
            }
        }
        const layoutInfo = reactive<Record<string, number>>({
            paperSize: 1,
            answerSheetLayout: 2,
            gradingMethod: 1
        })
        const layoutInfoName = computed(() => {
            return {
                paperSizeName: layoutData.paperSize[layoutInfo.paperSize],
                answerSheetLayoutName: layoutData.answerSheetLayout[layoutInfo.answerSheetLayout],
                gradingMethodName: layoutData.gradingMethod[layoutInfo.gradingMethod]
            }
        })

        const svgAutoHeight = computed(() => {
            if (baseInfo.checked4) {
                return 40
            }
            return 0
        })
        const textareaClass = computed(() => {
            if (baseInfo.checked4) {
                return 'textarea-checked4'
            }
            return 'textarea-no-checked4'
        })
        const dtkColor = computed(() => {
            if (baseInfo.checked5) {
                return '#ff0000'
            }
            return '#000000'
        })

        const dtkWidthClass = computed(() => {
            if (layoutInfo.paperSize == 1 && layoutInfo.answerSheetLayout == 2) {
                return 'w-785px'
            }
            if (layoutInfo.paperSize == 1 && layoutInfo.answerSheetLayout == 3) {
                return 'w-521px'
            }
            if (layoutInfo.paperSize == 2 && layoutInfo.answerSheetLayout == 1) {
                return 'w-750px'
            }
            return 'w-785px'
        })

        return {
            baseInfo,
            showLayout,
            layoutInfo,
            layoutInfoName,
            svgAutoHeight,
            textareaClass,
            dtkColor,
            dtkWidthClass
        }
    },
    {
        persist: false
    }
)
